<script setup>
import {onMounted, ref} from "vue";
import {doGet, doPost, doPut} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
import {useRouter} from "vue-router";
//用户集合
const UserList = ref([])
const userRole = ref({})
const router = useRouter()
//用角色字集合
const RoleList = ref([])

const loadRole = () =>{
    doGet('/api/role/list',{}).then(resp=>{{
      if (resp.data.code === 200){
        RoleList.value = resp.data.data
      }else {
        showMessage('数据加载失败，请稍后重试.','error')
      }
    }
    })
}
//
const loadData = () =>{
  doGet('/api/user/list2',{}).then(res=>{
   if (res.data.code === 200){
     UserList.value = res.data.data
   }else {
     showMessage('数据加载失败，请稍后重试.','error')
   }
  })
}
//选中用户 查询
const selectUser = (val) =>{
  doGet('/api/user/role/'+val).then(resp=>{
    if (resp.data.code === 200){
      userRole.value = resp.data.data
    }else {
      showMessage('数据加载失败，请稍后重试.','error')
    }
  })
}
//修改开关
const updataRole = ref(false)
const userRoleChange = (val) =>{
  updataRole.value = true
  selectUser(val)
}
const modifyRuleFormRef = ref({})
//提交表单
const submitE = (FromR) =>{

  if(!FromR) return
  FromR.validate((valid)=>{
    if (valid){
      let params = {
        userId: userRole.value.id,
        roleId: userRole.value.roleName
      }
      console.log(params)
      if(!userRole.value.userId){
        doPost('/api/userRole/add',params).then(resp=>{
          if (resp.data.code === 200){
            showMessage("添加成功","success")
            loadData()
          }else {
            showMessage("修改失败"+resp.data.msg,"error")
          }
    })
        return
      }else {
        doPost('/api/userRole/modify',params).then(resp=>{
          if (resp.data.code === 200){
            showMessage("修改成功","success")
            loadData()

          }else {
            showMessage("修改失败"+resp.data.msg,"error")
          }
        })
      }



    }
  })
}
onMounted(()=>{
  loadData()
  loadRole()
})
</script>

<template>
权限设置
  <el-table
      :data="UserList"
      row-key="id"
      style="width: 100%"

  >
    <el-table-column type="selection" :selectable="selectable" width="55" />

    <el-table-column type="index"  label="序号" width="55" />
    <el-table-column property="name" label="名字" width="120" />
    <el-table-column property="roleName" label="角色" width="120" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="userRoleChange(scope.row.id)">
          修改权限
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      v-model="updataRole"
      title="修改权限"
      width="500"
      :close-on-click-modal=false
      :show-close=true
      align-center
  >
    <el-form
        ref="modifyRuleFormRef"
        style="max-width: 600px"
        :model="userRole"
        status-icon

        label-width="auto"
    >
      <el-form-item label="名字" prop="oldPwd">
        <el-input v-model="userRole.name"  />
      </el-form-item>

      <el-form-item label="角色权限" prop="region">
        <el-select  v-model="userRole.roleName"   placeholder="请选择" value="role.id">
          <el-option
              v-for="role in RoleList"
              :key="role.id"
              :label="role.roleName"
              :value="role.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updataRole = false">取消</el-button>
        <el-button type="primary" @click="submitE(modifyRuleFormRef),updataRole=false">确认</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>